<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        body {
            background-color: #e9ecef;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            color: #495057;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        h2 {
            margin-bottom: 20px;
            text-align: center;
            font-weight: bold;
            color: #343a40;
        }

        .table {
            margin-bottom: 20px;
        }

        th {
            background-color: #007bff;
            color: white;
            text-align: center;
        }

        td {
            text-align: center;
            border-bottom: 1px solid #dee2e6; /* 添加底部边框 */
        }

        .pagination {
            justify-content: center;
            margin-top: 20px;
            display: flex;
            list-style: none;
            padding: 0;
        }

        .pagination li {
            margin: 0 5px;
        }

        .pagination a {
            color: #007bff;
            text-decoration: none;
            padding: 10px 15px;
            border: 1px solid #007bff;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }

        .pagination a:hover {
            background-color: #007bff;
            color: white;
        }

        .active a {
            background-color: #007bff;
            color: white;
        }

        .disabled a {
            color: #6c757d;
            pointer-events: none;
            border: 1px solid #6c757d;
        }

        .btn-success {
            margin: 20px 0;
            width: 100%;
            font-size: 1.2em;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="table-responsive">
    <h2><a th:href="@{/add}" class="btn btn-success">添加学生信息</a></h2>
    <table class="table table-striped table-sm">
        <thead>
        <tr>
            <th>学生编号</th>
            <th>学生学号</th>
            <th>学生姓名</th>
            <th>学生地址</th>
            <th>学生年龄</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="select:${select}">
            <td th:text="${select.id}">1,001</td>
            <td th:text="${select.studentNo}">Lorem</td>
            <td th:text="${select.studentName}">ipsum</td>
            <td th:text="${select.address}">dolor</td>
            <td th:text="${select.age}">dolor</td>
            <td>
                <input th:attr="del_uri=@{/emp/}+${select.id}" type="button" class="btn btn-danger deleteEmpBtn" value="删除" />
            </td>
        </tr>
        </tbody>
    </table>
    <form id="deleteEmpForm" method="post">
        <input type="hidden" name="_method" value="delete"/>
    </form>

</div>
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
<script>
    $('.deleteEmpBtn').click(function(){
        $('#deleteEmpForm').attr('action',$(this).attr('del_uri')).submit();
    });
</script>
</body>
</html>